<template>
  <div class="container">
    <elm-header :isBack="true" :title="city_name" @onBack="$router.back()">
      <template slot="right">
        切换城市
      </template>
    </elm-header>
    <div class="scroller">
      <!-- 地址搜索区 -->
      <div class="search-box">
        <div class="search-wrap">
          <input class="search-input" v-model="keyword"
         placeholder="输入学校、商务楼">
          <van-icon v-if="keyword" class="icon-input-close" 
            name="cross" 
            @click="clearSearch"
          />
        </div>
        <div class="search-wrap">
          <div class="submit-btn" @click="handleAddrSearch">提交</div>
        </div>
      </div>
      <!-- 历史记录 -->
      <div v-if="searchLoactions.length " class="city-list"  >
        <div class="city-item" v-for="city in searchLoactions" :key="city.geohash"
           @click="confirmLocation(city)">
          <p class="name">{{city.name}}</p>
          <p class="address">{{city.address}}</p>
        </div>
      </div>
      <div v-else-if="historyLocations.length" class="search-history-box">
        <p class="search-history-header">搜索历史</p>
        <div class="city-item" v-for="city in historyLocations" :key="city.geohash" 
          @click="confirmLocation(city)">
          <p class="name">{{city.name}}</p>
          <p class="address">{{city.address}}</p>
        </div>
        <div class="clear-history-btn" @click="clickHistorySearch">
          清空所有
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import elmHeader from '../../components/elmHeader'
import {searchAddress} from '../../api/city'
import {mapActions} from 'vuex'
import {COMMON_SET_LOCATION} from '../../store/mutationTypes'
import {getStorage, removeStorage} from '../../util/storage'

export default {
  components:{
    'elm-header': elmHeader,
  },
  created(){
    this.city_id = this.$route.params.id
    this.city_name = this.$route.params.name
    this.loadHistorySearch()
  },
  data(){
    return {
      city_id: null,
      city_name: '',
      keyword: '',
      searchLoactions:[],
      historyLocations:[]
    }
  },
  methods:{
    ...mapActions([COMMON_SET_LOCATION]),
    // 加载历史记录
    loadHistorySearch(){
      this.historyLocations = getStorage('history_locations') || []
    },
    // 清空历史记录
    clickHistorySearch(){
      removeStorage('history_locations')
      this.historyLocations = []
    },
    // 搜索地址
    async handleAddrSearch(){
      if(!this.keyword || !this.city_id){
        return 
      }
      try {
        const data = await searchAddress({
          city_id: this.city_id,
          keyword: this.keyword
        })
        this.searchLoactions = data
      } catch (err) {
        console.log(err);
      }
    },
    // 清空搜索关键字
    clearSearch(){
      this.keyword = ''
      this.searchLoactions = []
    },
    // 选中地址
    confirmLocation(item){
      // 保存到定位信息
      this[COMMON_SET_LOCATION](item)
      // 跳转到Home页
      this.$router.push({path:'/home'})
    }
  }
}
</script>
<style lang='scss' scoped>
@import '../../styles/mixin.scss';
@import '../../styles/var.scss';
.container{
  height: 100%;
  display: flex;
  flex-direction: column;
  background: #f5f5f5;
  .scroller{
    margin-top: .45rem;
    flex: 1;
    .search-box{
      margin-top: .1rem;
      padding: .1rem .16rem;
      background-color: #fff;
      .search-wrap{
        display: flex;
        align-items: center;
        .icon-input-close{
          position: absolute;
          right: .24rem;
          font-size: .26;
          font-weight: 700;
          height: .32rem;
          line-height: .32rem;
          padding: 0 .05rem;
        }
        *{
          flex: 1;
          height: .32rem;
          line-height: .32rem;
          font-size: .15rem;
          border-radius: .03rem;
        }
        .search-input{
          @include grey-border;
          padding: 0 .06rem;
        }
        .submit-btn{
          color: #fff;
          background-color: $primary;
          text-align: center;
          margin-top: .1rem;
        }
      }
    }
    .city-list{
      background-color: #fff
    }
    .city-item{
      @include grey-top-border;
      padding: .16rem .16rem;
      .name{
        font-size: .15rem;
        @include text-ellipsis;
      }
      .address{
        color: #999;
        font-size: .12rem;
        margin-top: .1rem;
        @include text-ellipsis;
      }
    }
    .search-history-box{
      background-color: #fff;
      .search-history-header{
        height: .22rem;
        line-height: .22rem;
        padding-left: .1rem;
        color: #444;
        font-size: .13rem;
        background: #f5f5f5;
      }
      .clear-history-btn{
        height: .48rem;
        line-height: .48rem;
        text-align: center;
        @include grey-top-border;
        @include grey-bottom-border;
      }
    }


    
  }
}
</style>